{% extends "pos/base.html" %}
{% load static %}

{% block title %}Deliver Invoice #{{ invoice.invoice_no }}{% endblock %}

{% block content %}
<div class="container-fluid mt-3">
  <form method="post" autocomplete="off">
    {% csrf_token %}

    <div class="card shadow-sm mb-3">
      <div class="card-header d-flex justify-content-between align-items-center">
        <div>
          <h5 class="mb-0 font-weight-bold">Delivery - Invoice #{{ invoice.invoice_no }}</h5>
          <small class="text-muted">
            Builty: {{ invoice.builty_no|default:"-" }} |
            Route: {{ invoice.from_city }} → {{ invoice.to_city }} |
            Current Hub: {{ invoice.current_city }}
          </small>
        </div>
        <a class="btn btn-light btn-sm" href="{% url 'good_transport:deliveries:list' %}">Back</a>
      </div>

      <div class="card-body">
        <div class="row">
          <div class="col-md-4 mb-2">
            <label><strong>Received By Name *</strong></label>
            <input type="text" name="received_by_name" class="form-control" value="{{ invoice.receiver_name|default:'' }}" required>
          </div>

          <div class="col-md-4 mb-2">
            <label><strong>Mobile</strong></label>
            <input type="text" name="received_by_mobile" class="form-control" value="{{ invoice.receiver_mobile|default:'' }}">
          </div>

          <div class="col-md-4 mb-2">
            <label><strong>CNIC</strong></label>
            <input type="text" name="received_by_cnic" class="form-control">
          </div>

          <div class="col-md-12 mb-2">
            <label><strong>Remarks</strong></label>
            <input type="text" name="remarks" class="form-control" placeholder="Optional remarks">
          </div>
        </div>
      </div>
    </div>

    <div class="card shadow-sm">
      <div class="card-header">
        <h6 class="mb-0 font-weight-bold">Item Delivery Detail</h6>
      </div>

      <div class="table-responsive">
        <table class="table table-sm table-bordered mb-0">
          <thead class="thead-light">
            <tr>
              <th style="width:45px;">#</th>
              <th>Item</th>
              <th class="text-right">Booked Qty</th>
              <th class="text-right">Received Qty</th>
              <th class="text-right">Damage Qty</th>
              <th class="text-right">Short Qty</th>
              <th>Damage Remarks</th>
            </tr>
          </thead>
          <tbody>
            {% for line in invoice_lines %}
              <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ line.product_name|default:"-" }}</td>
                <td class="text-right">{{ line.qty|floatformat:2 }}</td>

                <td>
                  <input
                    type="text"
                    name="received_qty_{{ line.id }}"
                    class="form-control form-control-sm text-right"
                    value="{{ line.qty|floatformat:2 }}"
                  >
                </td>

                <td>
                  <input
                    type="text"
                    name="damaged_qty_{{ line.id }}"
                    class="form-control form-control-sm text-right"
                    value="0.00"
                  >
                </td>

                <td>
                  <input
                    type="text"
                    name="short_qty_{{ line.id }}"
                    class="form-control form-control-sm text-right"
                    value="0.00"
                  >
                </td>

                <td>
                  <input
                    type="text"
                    name="damage_remarks_{{ line.id }}"
                    class="form-control form-control-sm"
                    placeholder="Optional"
                  >
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <div class="card-footer text-right">
        <button type="submit" class="btn btn-success">
          Save Delivery
        </button>
      </div>
    </div>
  </form>
</div>
{% endblock %}